﻿<!DOCTYPE html>
<!--
  - This file is part of SmartProxy <https://github.com/salarcode/SmartProxy>,
  - Copyright (C) 2022 Salar Khalilzadeh <salar2k@gmail.com>
  -
  - SmartProxy is free software: you can redistribute it and/or modify
  - it under the terms of the GNU General Public License version 3 as
  - published by the Free Software Foundation.
  -
  - SmartProxy is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  - GNU General Public License for more details.
  -
  - You should have received a copy of the GNU General Public License
  - along with SmartProxy.  If not, see <http://www.gnu.org/licenses/>.
  -->
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>SmartProxy Settings</title>
	<link href="css/bootstrap.min.css" rel="stylesheet" />
	<link href="css/font-awesome.min.css" rel="stylesheet" />
	<link href="css/common.css" rel="stylesheet" />
	<link href="css/datatables.min.css" rel="stylesheet" />
	<link href="css/noty.css" rel="stylesheet" />
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.bundle.min.js"></script>
	<script src="js/datatables.min.js"></script>
	<script src="js/noty.min.js"></script>
	<script src="js/messageBox.js"></script>
	<script src="code/settingsPage.js"></script>
</head>

<body>
	<div class="overlay" id="loadingOverlay">
		<div class="d-flex flex-column align-items-center text-primary">
			<span class="spinner-border mb-3" aria-hidden="true"></span>
			<span role="status">Loading...</span>
			<div class="delayed3seconds">If you can see this there must be an error while loading the page, try reloading and report the issue please.</div>
			<div class="delayed3seconds">Or the browser has loaded the page and not the SmartProxy extension. Just reload the page.</div>
		</div>
	</div>
	<div class="container p-2 pt-3">
		<div class="d-sm-none navbar navbar-expand-lg fixed-top navbar-darkX bg-light shadow px-2">
			<h2 class="slogan m-0 order-first flex-grow-1">
				<img src="../icons/smartproxy-48.png" />
				<br class="d-none d-md-inline-block" />
				SmartProxy
			</h2>

			<div class="order-last">
				<button class="navbar-toggler btn btn-light" type="button" data-bs-toggle="offcanvas"
					data-bs-target="#tabSettingsOffCanvas" aria-controls="tabSettingsOffCanvas" aria-expanded="false"
					aria-label="Toggle navigation">
					<i class="fas fa-bars fa-lg  text-secondary"></i>
				</button>
			</div>
		</div>
		<div class="offcanvas offcanvas-end" tabindex="-1" id="tabSettingsOffCanvas"
			aria-labelledby="offcanvasExampleLabel">
			<div class="offcanvas-header">
				<h4 class="slogan offcanvas-title" id="offcanvasExampleLabel">
					<img src="../icons/smartproxy-48.png" />
					SmartProxy
				</h4>
				<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
					aria-label="Close"></button>
			</div>
			<div class="offcanvas-body">
				<div class="nav flex-column nav-pills list-group interactive" role="tablist">
					<a class="nav-link active list-group-item-action" data-bs-dismiss="offcanvas"
						data-bs-toggle="pill" href="#tab-about" role="tab" aria-controls="tab-about"
						aria-expanded="true">
						<i class="fa fa-info-circle fa-lg text-primary" aria-hidden="true"></i>
						<span data-localize="settingsTabAbout">About</span>
					</a>

					<a class="nav-link list-group-item-action" data-bs-toggle="pill" href="#tab-general"
						role="tab" aria-controls="tab-general" data-bs-dismiss="offcanvas" aria-expanded="true">
						<i class="fas fa-wrench fa-lg text-success" aria-hidden="true"></i>
						<span data-localize="settingsTabGeneral">General Options</span>
					</a>
					<a class="nav-link list-group-item-action" data-bs-dismiss="offcanvas"
						data-bs-toggle="pill" href="#tab-servers" role="tab" aria-controls="tab-servers"
						aria-expanded="true">
						<i class="fas fa-server fa-lg text-secondary" aria-hidden="true"></i>
						<span data-localize="settingsTabProxyServers">Proxy Servers</span>
					</a>
					<a class="nav-link list-group-item-action" data-bs-dismiss="offcanvas"
						data-bs-toggle="pill" href="#tab-server-subscriptions" role="tab"
						aria-controls="tab-server-subscriptions" aria-expanded="true">
						<i class="fas fa-list-alt fa-lg text-secondary" aria-hidden="true"></i>
						<span data-localize="settingsTabProxyServerSubscriptions">Proxy Server Subscriptions</span>
					</a>
					<a class="nav-link disabled list-group-item-action" data-bs-dismiss="offcanvas"
						data-bs-toggle="pill" role="tab" aria-controls="tab-rules" aria-expanded="true">
						<span class="fa-stack-no-margin fa-stack text-warning fa-sm">
							<i class="fas fa-square fa-stack-2x"></i>
							<i class="fas fa-tasks fa-stack-1x fa-inverse"></i>
						</span>
						<span data-localize="settingsTabSmartProfiles">Smart Profiles</span>
					</a>

					<a class="nav-link nav-smart-profile list-group-item-action menu-smart-profile"
						data-bs-dismiss="offcanvas" data-bs-toggle="pill" href="#tab-smart-profile" role="tab"
						aria-controls="tab-rules" aria-expanded="true">
						<!--Smart Profile template-->
						<i class="icon fa-lg" aria-hidden="true"></i>
						<span id="menu-smart-profile-name">{profile-name}</span>
					</a>

					<a class="nav-link nav-smart-profile mb-2 list-group-item-action menu-add-smart-profile"
						data-bs-dismiss="offcanvas" data-bs-toggle="modal" data-bs-target="#modalAddNewSmartProfile"
						href="#new-smart-profile">
						<i class="fas fa-folder-plus fa-lg text-info" aria-hidden="true"></i>
						<span data-localize="settingsTabAddSmartProfile">Add new Smart Profile</span>
					</a>

					<a class="nav-link list-group-item-action" data-bs-toggle="pill"
						data-bs-dismiss="offcanvas" href="#tab-backup" role="tab" aria-controls="tab-backup"
						aria-expanded="true">
						<i class="fas fa-life-ring text-success" aria-hidden="true"></i>
						<span data-localize="settingsTabBackupRestore">Backup/ Restore</span>
					</a>
					<a class="nav-link list-group-item-action d-none menu-update-available"
						href="#tab-update" target="_blank" rel="noopener noreferrer" role="tab">
						<i class="fas fa-star text-danger" aria-hidden="true"></i>
						<span>Update text</span>
					</a>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-4 col-md-4 col-lg-3">
				<h2 class="slogan">
					<img src="../icons/smartproxy-48.png" />
					<br class="d-none d-md-inline-block" />
					SmartProxy
				</h2>
				<br class="d-none d-md-inline-block" />
				<div class="nav flex-column nav-pills list-group interactive d-none d-sm-block" role="tablist">
					<a class="nav-link active list-group-item-action" id="tab-about-tab"
						data-bs-toggle="pill" href="#tab-about" role="tab" aria-controls="tab-about"
						aria-expanded="true">
						<i class="fas fa-cog fa-lg text-primary" aria-hidden="true"></i>
						<span data-localize="settingsTabAbout">About</span>
					</a>
					<a class="nav-link list-group-item-action" data-bs-toggle="pill" href="#tab-general"
						role="tab" aria-controls="tab-general" aria-expanded="true">
						<i class="fas fa-wrench fa-lg text-success" aria-hidden="true"></i>
						<span data-localize="settingsTabGeneral">General Options</span>
					</a>
					<a class="nav-link list-group-item-action" data-bs-toggle="pill" href="#tab-servers"
						role="tab" aria-controls="tab-servers" aria-expanded="true">
						<i class="fas fa-server fa-lg text-secondary" aria-hidden="true"></i>
						<span data-localize="settingsTabProxyServers">Proxy Servers</span>
					</a>
					<a class="nav-link list-group-item-action" data-bs-toggle="pill"
						href="#tab-server-subscriptions" role="tab" aria-controls="tab-server-subscriptions"
						aria-expanded="true">
						<i class="fas fa-list-alt fa-lg text-secondary" aria-hidden="true"></i>
						<span data-localize="settingsTabProxyServerSubscriptions">Proxy Server Subscriptions</span>
					</a>
					<a class="nav-link disabled list-group-item-action" data-bs-toggle="pill" role="tab"
						aria-controls="tab-rules" aria-expanded="true">
						<span class="fa-stack-no-margin fa-stack text-warning fa-sm">
							<i class="fas fa-square fa-stack-2x"></i>
							<i class="fas fa-tasks fa-stack-1x fa-inverse"></i>
						</span>
						<span data-localize="settingsTabSmartProfiles">Smart Profiles</span>
					</a>

					<a class="nav-link nav-smart-profile list-group-item-action menu-smart-profile"
						data-bs-toggle="pill" href="#tab-smart-profile" role="tab" aria-controls="tab-rules"
						aria-expanded="true">
						<!--Smart Profile template-->
						<i class="icon fa-lg" aria-hidden="true"></i>
						<span id="menu-smart-profile-name">{profile-name}</span>
					</a>

					<a class="nav-link nav-smart-profile mb-2 list-group-item-action menu-add-smart-profile"
						data-bs-toggle="modal" data-bs-target="#modalAddNewSmartProfile" href="#new-smart-profile">
						<i class="fas fa-folder-plus fa-lg text-info" aria-hidden="true"></i>
						<span data-localize="settingsTabAddSmartProfile">Add new Smart Profile</span>
					</a>

					<a class="nav-link list-group-item-action" data-bs-toggle="pill" href="#tab-backup"
						role="tab" aria-controls="tab-backup" aria-expanded="true">
						<i class="fas fa-life-ring text-success" aria-hidden="true"></i>
						<span data-localize="settingsTabBackupRestore">Backup/ Restore</span>
					</a>
					<a class="nav-link list-group-item-action d-none menu-update-available"
						href="#tab-update" target="_blank" rel="noopener noreferrer" role="tab">
						<i class="fas fa-star text-danger" aria-hidden="true"></i>
						<span>Update text</span>
					</a>
				</div>
			</div>
			<div class="col-sm-8 col-md-8 col-lg-9">
				<div class="tab-content" id="tabSettingsContent">
					<div class="tab-pane fade show active" id="tab-about" role="tabpanel"
						aria-labelledby="tab-about-tab">
						<!----------About----------->
						<h3 data-localize="settingsTabAbout">About</h3>
						<hr class="afshin-line" />
						
						<!-- Affiliate Ad Box -->
						<div class="affiliate-ad-box">
							<div class="affiliate-ad-label">Affiliate Ad</div>
							<a href="https://www.avaproxy.com/?utm_source=smartproxy&utm_medium=affiliate&utm_campaign=extension" 
							   target="_blank" 
							   rel="noopener nofollow" 
							   class="affiliate-ad-content">
								<div class="affiliate-ad-icon">
									<img src="https://www.avaproxy.com/web/image/website/1/favicon" 
									     alt="AvaProxy" 
									     class="affiliate-ad-favicon">
									<i class="fas fa-server affiliate-ad-fallback"></i>
								</div>
								<div class="affiliate-ad-text">
									<h4 class="affiliate-ad-title">AvaProxy: Custom VPN servers on shared hostings</h4>
									<p class="affiliate-ad-description">Create custom VPN servers on shared hostings with AvaProxy Server - it's free!</p>
								</div>
							</a>
						</div>
						
						<div id="divNoServersWarning" class="alert alert-danger alert-dismissible fade show"
							role="alert">
							<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
							<strong>
								<i class="fas fa-info-circle" aria-hidden="true"></i>
								<span data-localize="settingsErrNoServersTitle">No Servers!</span>
							</strong>
							<span data-localize="settingsErrNoServersDescription">Before anything you have to define
								proxy servers.</span>
						</div>
						<div id="divNoServersWarning" class="alert  fade show"
							role="alert">
							<!-- Affiliate link has been added above -->
						</div>
						<div id="settingAboutPlaceHolder">Loading...</div>
					</div>
					<div class="tab-pane fade" id="tab-general" role="tabpanel">
						<!----------General Options----------->
						<h3 data-localize="settingsTabGeneral">General Options</h3>
						<hr class="afshin-line" />
						<div>
							<h3 data-localize="settingsGeneralSmartFeatures">Smart Features</h3>
							<label class="mx-2 form-label">
								<input id="chkProxyPerOrigin" checked type="checkbox" class="form-check-input" />
								<span data-localize="settingsGeneralProxyPerOrigin">Enable proxy per tab/origin</span>
								<div class="form-text text-muted" data-localize="settingsGeneralProxyPerOriginDesc">
									If one of the rules matched the origin/the main url of the tab and that proxy is
									applied to it, every other
									request from that origin will also use that proxy; this will result in having the
									whole tab proxied to a
									certain proxy.
									Also this eliminates the need to have a rule for every single domain.
									Please note that if no proxy is applied to the tab, still proxy rules can apply to
									other requests to other
									domains individually.
								</div>
							</label>
							<div class="chrome-only alert alert-warning alert-dismissible fade show" role="alert"
								style="display:none">
								<span data-localize="settingsGeneralSmartFeaturesNoChrome">
									<strong><a href='https://www.getfirefox.com/' target='_blank'
											rel='noopener'>Firefox</a> only!</strong> Unfortunately this feature is not
									supported by Chrome.
								</span>
								<button type="button" class="btn-close" data-bs-dismiss="alert"
									aria-label="Close"></button>
							</div>
							<div class="card-group d-flex" style="max-width: 35rem;">
								<div class="card">
									<img class="card-img-top pl-3 pr-3" src="img/proxy-per-origin-enabled.svg"
										alt="Card image cap">
									<div class="card-body">
										<p class="card-text" data-localize="settingsGeneralProxyPerOriginEnabled">Proxy
											per tab/origin enabled</p>
									</div>
								</div>
								<div class="card">
									<img class="card-img-top pl-3 pr-3" src="img/proxy-per-origin-disabled.svg"
										alt="Card image cap">
									<div class="card-body">
										<p class="card-text" data-localize="settingsGeneralProxyPerOriginDisabled">Proxy
											per tab/origin disabled</p>
									</div>
								</div>
							</div>
							<br>
							<h5>
								🔐 <span data-localize="settingsGeneralIncognitoProfile">Private Browsing Profile</span>
							</h5>
							<div class="row mb-1">
								<div class="col-6">
									<select id="cmbGeneralIncognitoProfile" class="form-select">
										<option value="" data-localize="settingsGeneralIncognitoProfileDisabled">
											(Disabled)</option>
									</select>
								</div>
								<div class="form-text text-muted" data-localize="settingsGeneralIncognitoProfileDesc">
									Select a private browsing profile if you want to force it to be used when tab/window
									is in Private Browsing mode. This option will override the active profile.
								</div>
							</div>
							<div class="chrome-only alert alert-warning alert-dismissible fade show" role="alert"
								style="display:none">
								<span data-localize="settingsGeneralSmartFeaturesNoChrome">
									<strong><a href='https://www.getfirefox.com/' target='_blank'
											rel='noopener'>Firefox</a> only!</strong> Unfortunately this feature is not
									supported by Chrome.
								</span>
								<button type="button" class="btn-close" data-bs-dismiss="alert"
									aria-label="Close"></button>
							</div>
						</div>
						<div>
							<hr class="afshin-line" />
							<h3 data-localize="settingsGeneralSyncing">Syncing</h3>
							<label class="mx-2 form-label">
								<input id="chkSyncSettings" checked type="checkbox" class="form-check-input" />
								<span data-localize="settingsGeneralEnableSyncing">Enable settings syncing</span>
								<div class="form-text text-muted" data-localize="settingsGeneralEnableSyncingDesc">
									By enabling syncing, your all settings including rules, servers and subscriptions
									will be available across all
									browsers.
								</div>
							</label>
							<br>
							<label class="mx-4 form-label">
								<input id="chkSyncProxyMode" checked type="checkbox" class="form-check-input" />
								<span data-localize="settingsGeneralSyncProxyMode">Enable syncing active profile</span>
								<div class="form-text text-muted" data-localize="settingsGeneralSyncProxyModeDesc">
									Check if you want the proxy activation mode to be synced.
								</div>
							</label>
							<br>
							<label class="mx-4 form-label">
								<input id="chkSyncActiveProxy" checked type="checkbox" class="form-check-input" />
								<span data-localize="settingsGeneralSyncActiveProxy">Enable syncing active proxy</span>
								<div class="form-text text-muted" data-localize="settingsGeneralSyncActiveProxyDesc">
									Check if you want the selected proxy server to be synced
								</div>
							</label>
							<br/>
							<label class="mx-4 form-label">
								<input type="radio" name="syncOption" id="chkSyncToBrowser" class="form-check-input" checked />
								<span data-localize="settingsGeneralSyncToBrowser">Use the browser's sync servers</span>
							</label>
							<br />
							<label class="mx-4 form-label">
								<input type="radio" name="syncOption" id="chkSyncToWebDAV" class="form-check-input" />
								<span data-localize="settingsGeneralSyncToWebDAV">Sync to a WebDAV server</span>
							</label>
						
							<!-- Conditional Visibility Fields -->
							<div id="webDAVFields" class="mx-5 d-none">
								<div class="row">
									<div class="col-6">
										<label for="txtWebDavServerUrl" class="form-label">
											<span data-localize="settingsGeneralWebDavServerUrl">WebDAV Server URL:</span>
										</label>
										<input type="url" id="txtWebDavServerUrl" class="form-control" placeholder="Enter WebDAV server URL" />
									</div>
									<div class="col-6">
										<label for="txtWebDavBackupFilename" class="form-label">
											<span data-localize="settingsGeneralWebDavBackupFilename">Backup Filename:</span>
										</label>
										<input type="text" id="txtWebDavBackupFilename" class="form-control" value="smartproxy_settings.json" />
									</div>
								</div>
								<div class="row mt-3">
									<div class="col-6">
										<label for="txtWebDavServerUser" class="form-label">
											<span data-localize="settingsGeneralWebDavServerUser">WebDAV Server Username:</span>
										</label>
										<input type="text" id="txtWebDavServerUser" class="form-control" placeholder="Enter username" />
									</div>
									<div class="col-6">
										<label for="txtWebDavServerPassword" class="form-label">
											<span data-localize="settingsGeneralWebDavServerPassword">WebDAV Server Password:</span>
										</label>
										<input type="password" id="txtWebDavServerPassword" class="form-control" placeholder="Enter password" />
									</div>
								</div>
								<div class="mt-3">
									<span class="float-start" data-localize="settingsGeneralWebDavBehaviourDesc">
										Please note that backups will occur on every change to the settings, while restore is only when the browser starts.
									</span>
									<div class="float-end">
										<button id="btnWebDavServerBackupNow" type="button" class="btn btn-info" data-localize="settingsGeneralWebDavServerBackupNow">Backup Now</button>
									</div>
									<div class="clearfix"></div>
								</div>
							</div>
						</div>
						<div>
							<hr class="afshin-line" />
							<h3 data-localize="settingsGeneralErrorDetection">Error Detection</h3>
							<label class="mx-2 form-label">
								<input id="chkDetectRequestFailures" checked type="checkbox" class="form-check-input" />
								<span data-localize="settingsGeneralDetectFailures">Detect request failures</span>
								<div class="form-text text-muted" data-localize="settingsGeneralDetectFailuresDesc">
									Request failures detection will help you identify the domains that needs proxy.
								</div>
							</label>
							<br>
							<label class="mx-2 form-label">
								<span data-localize="settingsGeneralIgnoreRequestFailuresForDomains">Ignore failure
									detection for these domains</span>
								<button id="btnIgnoreRequestFailuresForDomains" class="btn btn-sm btn-outline-secondary"
									type="button" data-localize="settingsGeneralSelectIgnoredDomains">Select
									Domains</button>
								<div class="form-text text-muted"
									data-localize="settingsGeneralIgnoreRequestFailuresForDomainsDesc">
									Enter domain list you wish to disable failure detection.
								</div>
							</label>
							<br>
							<label class="mx-2 form-label">
								<input id="chkDisplayFailedOnBadge" checked type="checkbox" class="form-check-input" />
								<span data-localize="settingsGeneralDisplayFailedOnBadge">Display failed requests count
									on toolbar icon badge</span>
							</label>
						</div>
						<div>
							<hr class="afshin-line" />
							<h3 data-localize="settingsGeneralThemes">Themes</h3>

							<label class="mx-2 form-label">
								<input checked type="radio" name="rbtnThemes_Selection"
									id="rbtnThemesAutoSwitchBySystem" class="form-check-input">
								<span data-localize="settingsGeneralThemesAutoSwitch">Auto switch by the Browser
									theme</span>
								<div class="form-text" data-localize="settingsGeneralThemesAutoSwitchDesc">
									Auto switch between the themes selected below. This follow your browsers theme which
									that can also follow the theme of your operation system.
								</div>
							</label>
							<br />
							<label class="mx-2 form-label">
								<input type="radio" name="rbtnThemes_Selection" id="rbtnThemesLight"
									class="form-check-input">
								<span data-localize="settingsGeneralThemesLight">Light Theme</span>
							</label>
							<div class="mx-4">
								<div class="row mb-3">
									<div class="col-5">
										<select id="cmbThemesLight" class="form-select">
											<option value="" data-localize="settingsGeneralThemes_Default">(Default)
											</option>
											<option value="0" data-localize="settingsGeneralThemes_Custom">(Custom)
											</option>
										</select>
									</div>
								</div>
								<div class="row mb-3 d-none" id="divThemesLightCustom">
									<div class="form-group col-5">
										<label for="txtThemesLightCustomUrl"
											data-localize="settingsGeneralThemes_CustomUrl" class="form-label">Custom
											Styles (Css) Url:</label>
										<input type="url" id="txtThemesLightCustomUrl" class="form-control">
									</div>
									<div class="form-text" data-localize="settingsGeneralThemes_CustomUrlDesc">
										Url must be 'Https'. Be aware of imported fonts and other styles in the
										following custom style, they can block/slow down the Popups in your browser. You
										can try themes from bootswatch.com but be aware of their google fonts
										dependency.
									</div>
								</div>
							</div>
							<label class="mx-2 form-label">
								<input type="radio" name="rbtnThemes_Selection" id="rbtnThemesDark"
									class="form-check-input">
								<span data-localize="settingsGeneralThemesDark">Dark Theme</span>
							</label>
							<div class="mx-4">
								<div class="row mb-3">
									<div class="col-5">
										<select id="cmbThemesDark" class="form-select">
											<option value="themes-cosmo-dark">Cosmo Dark</option>
											<option value="themes-cosmo-brown">Cosmo Brown</option>
											<option value="0" data-localize="settingsGeneralThemes_Custom">(Custom)
											</option>
										</select>
									</div>
								</div>
								<div class="row mb-3 d-none" id="divThemesDarkCustom">
									<div class="form-group col-5">
										<label for="txtThemesDarkCustomUrl"
											data-localize="settingsGeneralThemes_CustomUrl" class="form-label">Custom
											Styles (Css) Url:</label>
										<input type="url" id="txtThemesDarkCustomUrl" class="form-control">
									</div>
									<div class="form-text" data-localize="settingsGeneralThemes_CustomUrlDesc">
										Url must be 'Https'. Be aware of imported fonts and other styles in the
										following custom style, they can block/slow down the Popups in your browser. You
										can try themes from bootswatch.com but be aware of their google fonts
										dependency.
									</div>
								</div>
							</div>
						</div>
						<div>
							<hr class="afshin-line" />
							<h3 data-localize="settingsGeneralOtherSettings">Other Settings</h3>
							<label class="mx-2 form-label">
								<input id="chkEnableShortcuts" checked type="checkbox" class="form-check-input" />
								<span data-localize="settingsGeneralEnableShortcuts">Enable Shortcuts</span>
								<div class="form-text text-muted">
									<span data-localize="settingsGeneralEnableShortcutsDesc">You can configure shortcuts
										from browser addon settings page.</span>
									<a id="btnViewShortcuts" href="#" data-localize="settingsGeneralViewShortcuts">View
										shortcuts</a>
								</div>
							</label>
							<br />
							<label class="mx-4 form-label">
								<input id="chkShortcutNotification" checked type="checkbox" class="form-check-input" />
								<span data-localize="settingsGeneralShortcutNotification">Enable shortcut
									notification</span>
							</label>
							<br />
							<label class="mx-2 form-label firefox-only">
								<input id="chkDisplayAppliedProxyOnBadge" checked type="checkbox"
									class="form-check-input" />
								<span data-localize="settingsGeneralDisplayAppliedProxyOnBadge">Display applied rule
									source on badge</span>
							</label>
							<br class="firefox-only" />
							<label class="mx-2 form-label firefox-only">
								<input id="chkDisplayMatchedRuleOnBadge" checked type="checkbox"
									class="form-check-input" />
								<span data-localize="settingsGeneralDisplayAppliedRulePatternOnBadge">Display applied
									rule pattern on badge</span>
							</label>
							<br class="firefox-only" />
							<label class="mx-2 form-label">
								<input id="chkRefreshTabOnConfigChanges" checked type="checkbox"
									class="form-check-input" />
								<span data-localize="settingsGeneralRefreshTabOnConfigChanges">Refresh active tab when
									proxy profile changed</span>
							</label>
						</div>
						<div class="mt-5"></div>
						<p class="mt-4"></p>
						<div class="position-sticky-bottom">
							<div class="sticky-save-buttons-bar">
								<div class="float-start">
									<button id="btnSaveGeneralOptions" class="btn btn-primary">
										<span data-localize="settingsSaveGeneralOptionsButton">Save Changes</span>
									</button>
									<button id="btnRejectGeneralOptions" class="btn btn-outline-secondary">
										<span data-localize="settingsRejectGeneralOptionsButton">Reject Changes</span>
									</button>
									<a title="Help" href="https://github.com/salarcode/SmartProxy/wiki/General-Options"
										target="_blank" class="btn btn-outline-info">
										<i class="fas fa-question"></i>
									</a>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
					</div>
					<div class="tab-pane fade" id="tab-servers" role="tabpanel">
						<!----------Proxy Servers----------->
						<h3 data-localize="settingsTabProxyServers">Proxy Servers</h3>
						<hr class="afshin-line" />
						<h5 data-localize="settingsActiveProxyServer">
							Default Proxy Server:
						</h5>
						<div class="row mb-3">
							<div class="col-6">
								<select id="cmbActiveProxyServer" class="form-select">
									<option value="0">(Select)</option>
								</select>
							</div>
						</div>
						<h5 data-localize="settingsTabProxyServersTitle">
							Manage your proxy servers:
						</h5>
						<p data-localize="settingsTabProxyServersDescription">
							Here is the list of proxy servers. You can define as many proxy as you want and switch
							between then from
							toolbar.
						</p>
						<p>
						<div class="float-start">
							<button id="btnAddProxyServer" class="btn btn-info"
								data-localize="settingsAddServerButton">Add Server</button>
						</div>
						<div class="float-end">
							<button id="btnImportProxyServerOpen" type="button" class="btn btn-info"
								data-bs-toggle="modal" data-bs-target="#modalImportProxyServer"
								data-localize="settingsImportProxiesButton">
								Import Proxies
							</button>
							<button id="btnExportProxyServerOpen" type="button" class="btn btn-info"
								data-localize="settingsExportProxiesButton">
								Export Proxies
							</button>
						</div>
						<div class="clearfix"></div>
						</p>
						<table id="grdServers" class="table table-striped table-bordered table-hover"></table>

						<p class="mt-4">
						<div class="float-start">
							<button id="btnSaveProxyServers" class="btn btn-primary">
								<span data-localize="settingsSaveChangesButton">Save Changes</span>
							</button>
							<button id="btnRejectProxyServers" class="btn btn-outline-secondary">
								<span data-localize="settingsRejectChangesButton">Reject Changes</span>
							</button>
							<a title="Help" href="https://github.com/salarcode/SmartProxy/wiki/Proxy-Servers"
								target="_blank" class="btn btn-outline-info">
								<i class="fas fa-question"></i>
							</a>
						</div>
						<div class="float-end">
							<button id="btnRemoveMultipleProxyServer" class="btn btn-danger" disabled
								data-localize="settingsRemoveMultipleServerButton"
								title="Use Ctrl/Shift and click on the grid">Delete Multiple</button>
							<button id="btnClearProxyServers" class="btn btn-outline-danger"
								title="Clear the servers list">
								<i class="fas fa-trash" aria-hidden="true"></i>
							</button>
						</div>
						<div class="clearfix"></div>
						</p>
					</div>
					<div class="tab-pane fade" id="tab-smart-profile" role="tabpanel">
						<!----------Smart Profiles Tab----------->
						<h3 class="d-flex flex-sm-row flex-column">
							<div class="flex-grow-1">
								<span data-localize="settingsProfilesNameTitle">Smart Profile:</span>
								<a id="lblProfileName" class="fs-5" href="#">{profile-name}
									<i class="fas fa-pencil-alt"></i></a>
								<input id="txtSmartProfileName" class="form-control d-none w-auto"
									placeholder="Name used in menu" required />
							</div>
							<div class="align-self-end" id="divSmartProfileEnabled">
								<div class="form-check form-switch">
									<label class="fs-5 form-check-label">
										<span data-localize="settingsProfilesEnabled"
											class="user-select-none">Enabled</span>
										<input class="form-check-input" type="checkbox" role="switch" checked
											id="chkSmartProfileEnabled">
									</label>
								</div>
							</div>
						</h3>
						<hr class="afshin-line" />
						<h5>
							<span data-localize="settingsProfilesTypeTitle">Profile Type:</span>
							<i id="lblProfileTypeIcon" class="fa-sm text-primary" aria-hidden="true"></i>
							<span id="lblProfileType">{profile-type}</span>
						</h5>
						<p id="label-profile-rules-description">
							<span class="label-profile-type-description label-profile-type-description-for-SmartRules"
								data-localize="settingsProfilesTypeDesc_SmartRules">
								In this profile no proxy is applied unless you define smart rules. You will define black
								listed rules or in other words rules to apply proxy.
							</span>
							<span data-localize="settingsProfilesTypeDesc_AlwaysEnabledBypassRules"
								class="label-profile-type-description label-profile-type-description-for-AlwaysEnabledBypassRules">
								In this profile proxy servers are always applied define smart rules and skip them. You
								will define white listed rule or in other words rules to skip proxy and do not apply
								proxy.
							</span>
							<span data-localize="settingsProfilesTypeDesc_IgnoreFailureRules"
								class="label-profile-type-description label-profile-type-description-for-IgnoreFailureRules">
								Ignore failure detection for these domains by adding rules.
							</span>
						</p>
						<hr class="afshin-line" />
						<div id="divProfileProxyServer" style="display: block;">
							<h5 data-localize="settingsProfilesProfileProxyServer">
								Profile Proxy Server:
							</h5>
							<div class="row mb-3">
								<div class="col-6">
									<select id="cmbProfileProxyServer" class="form-select">
										<option value="0" data-localize="settingsProfilesDefaultProfileProxyServer">
											(Use Default Proxy Server)</option>
									</select>
									<span class="form-text text-muted small"
										data-localize="settingsProfilesProfileProxyServerDesc">
										(While using this profile, this is going to be the active proxy server)</span>
								</div>
							</div>
							<hr class="afshin-line" />
						</div>

						<h5 class="mt-1">
							<span data-localize="settingsProfilesRulesSection">Rules</span>
						</h5>
						<p>
						<div class="float-start">
							<button id="btnAddProxyRule" class="btn btn-info" data-localize="settingsAddRuleButton">
								Add Rule</button>
							<button id="btnAddMultipleProxyRule" type="button" class="btn btn-info"
								data-localize="settingsAddMultipleRulesButton" data-bs-target="#modalAddMultipleRules">
								Add Multiple Rules
							</button>
						</div>
						<div class="float-end">
							<button id="btnImportRulesOpen" type="button" class="btn btn-info" data-localize="settingsImportRulesButton">
								Import Rules
							</button>
						</div>
						<div class="clearfix"></div>
						</p>
						<table id="grdRules" class="table table-striped table-bordered table-hover"></table>
						<div class="float-end">
							<button id="btnRemoveMultipleProxyRule" type="button" class="btn btn-danger"
								data-localize="settingsRemoveMultipleProxyRuleButton" disabled
								title="Use Ctrl/Shift and click on the grid">
								Delete Multiple
							</button>
							<button id="btnClearProxyRules" class="btn btn-outline-danger" title="Clear all the rules">
								<i class="fas fa-trash" aria-hidden="true"></i>
							</button>
						</div>
						<div class="clearfix"></div>


						<div id="divSmartProfileSubscription">
							<hr class="afshin-line" />
							<h3 class="mt-1">
								<span data-localize="settingsProfilesRulesSubscriptionsTitle">Rules Subscriptions</span>
							</h3>
							<p class="mt-2" id="label-profile-subscription-description"
								data-localize="settingsProfilesRulesSubscriptionsDesc">
								Here you can subscribe to rules lists.
							</p>
							<p>
							<div class="float-start">
								<button id="btnAddRulesSubscription" class="btn btn-info"
									data-localize="settingsAddRulesSubscriptionButton">
									Subscribe to a rules list
								</button>
							</div>
							<div class="clearfix"></div>
							</p>
							<table id="grdRulesSubscriptions" class="table table-striped table-bordered table-hover">
							</table>
							<div class="float-end">
								<button id="btnRemoveMultipleRulesSubscription" class="btn btn-danger" disabled
									data-localize="settingsRemoveMultipleRulesSubscriptionButton"
									title="Use Ctrl/Shift and click on the grid">
									Delete Multiple
								</button>
								<button id="btnClearRulesSubscriptions" class="btn btn-outline-danger"
									title="Clear all the subscriptions">
									<i class="fas fa-trash" aria-hidden="true"></i>
								</button>
							</div>
							<div class="clearfix"></div>
						</div>
						<p class="mt-2">
						<div class="position-sticky-bottom">
							<div class="sticky-save-buttons-bar">
								<div class="float-start">
									<button id="btnSaveSmartProfile" class="btn btn-primary">
										<span data-localize="settingsSaveChangesButton">Save Changes</span>
									</button>
									<button id="btnRejectSmartProfile" class="btn btn-outline-secondary">
										<span data-localize="settingsRejectChangesButton">Reject Changes</span>
									</button>
									<a title="Help" href="https://github.com/salarcode/SmartProxy/wiki/Smart-Profiles"
										target="_blank" class="btn btn-outline-info">
										<i class="fas fa-question"></i>
									</a>
								</div>
								<div class="float-end">
									<button id="btnDeleteSmartProfile" class="btn btn-outline-danger">
										<i class="fas fa-trash" aria-hidden="true"></i>
										<span data-localize="settingsProfilesDelete">Delete</span>
									</button>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
						</p>
						<!-- MODALS-->
						<div class="modal fade" id="modalModifyRule" tabindex="-1" role="dialog"
							aria-labelledby="modalModifyRuleLabel">
							<!-- Proxy Rule -->
							<form action="#" id="frmModifyRule">
								<div class="modal-dialog" role="document">
									<div class="modal-content">
										<div class="modal-header">
											<h4 class="modal-title" id="modalModifyRuleLabel"
												data-localize="settingsRulesModalTitle">Rule Details</h4>
											<button type="button" class="btn-close" data-bs-dismiss="modal"
												aria-label="Close"></button>
										</div>
										<div class="modal-body">
											<div class="row mb-3">
												<div class="form-group col-sm-6">
													<label for="txtRuleMatchPattern" class="form-label"
														data-localize="settingsRulesRuleType">Rule Type</label>
													<select id="cmdRuleType" class="form-select">
														<option value="0">Host wildcard (Match Pattern)</option>
														<option value="1">Url wildcard (Match Pattern)</option>
														<option value="2">Host regex</option>
														<option value="3">Url regex</option>
														<option value="4">Exact Url</option>
														<option value="5">Search Domain and Subdomain</option>
													</select>
												</div>
												<div class="form-group col-sm-6">
													<br />
													<label class="form-check-label mt-2">
														<input class="form-check-input" type="checkbox"
															id="chkRuleEnabled">
														<span data-localize="settingsRulesEnabled"
															class="user-select-none">Enabled</span>
													</label>
												</div>
											</div>
											<div class="row mb-3">
												<div class="form-group col-sm-6">
													<label for="txtRuleSource" class="form-label"
														data-localize="settingsRulesSourceDomain">Rule Source
														Domain</label>
													<input type="text" id="txtRuleSource" class="form-control"
														required />
													<span class="form-text text-muted small"
														data-localize="settingsRulesSourceDomainDesc">(e.g.
														google.com)</span>
												</div>
												<div class="form-group col-sm-6" id="divRuleGeneratePattern">
													<br />
													<label class="form-check-label mt-2 text-nowrap">
														<input class="form-check-input" type="checkbox"
															id="chkRuleGeneratePattern">
														<span data-localize="settingsRulesGeneratePattern"
															class="user-select-none">Generate pattern
															automatically</span>
													</label>
												</div>
											</div>
											<div class="row mb-3" id="divRuleMatchPattern">
												<div class="form-group col">
													<label for="txtRuleMatchPattern" class="form-label"
														data-localize="settingsRulesPattern">Match Pattern</label>
													<input disabled type="text" id="txtRuleMatchPattern"
														class="form-control" />
												</div>
											</div>
											<div class="row mb-3" id="divRuleUrlRegex">
												<div class="form-group col">
													<label for="txtRuleUrlRegex" data-localize="settingsRulesRegex"
														class="form-label">
														Url Regex</label>
													<input type="text" id="txtRuleUrlRegex" class="form-control" />
												</div>
											</div>
											<div class="row mb-3" id="divRuleUrlExact">
												<div class="form-group col">
													<label for="txtRuleUrlExact" class="form-label"
														data-localize="settingsRulesExactUrl">
														Exact Url</label>
													<input type="url" id="txtRuleUrlExact" class="form-control" />
												</div>
											</div>
											<div class="row">
												<div class="form-group col-sm-6">
													<label for="cmdRuleAction" class="form-label"
														data-localize="settingsRulesActionType">Action</label>
													<select id="cmdRuleAction" class="form-select">
														<option value="0" data-localize="settingsRuleActionApplyProxy">
															Apply Proxy</option>
														<option value="1" data-localize="settingsRuleActionWhitelist">
															Whitelist (No proxy)</option>
													</select>
												</div>
												<div class="form-group col-sm-6" id="divRuleProxyServer">
													<label for="cmdRuleProxyServer" class="form-label"
														data-localize="settingsRulesProxyServer">Proxy Server</label>
													<select id="cmdRuleProxyServer" class="form-select"></select>
													<span class="form-text text-muted small chrome-only"
														data-localize="settingsRulesProxyServerNotAuth">
														(Servers with authentication are not supported in Chrome)</span>
												</div>
												<div class="col-sm-12">
													<span id="divRuleActionWhitelistDesc" class="form-text text-muted small" style="display: none;" data-localize="settingsRuleActionWhitelistDesc">
														(Whitelist rules have higher priority than proxy rules, regardless of their placement)</span>
													</span>
												</div>
											</div>
										</div>
										<div class="p-3">
											<div class="float-end">
												<button type="button" id="btnSubmitRule" class="btn btn-primary"
													data-localize="settingsRulesModalSave">Save</button>
												<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
													data-localize="settingsRulesModalCancel">Cancel</button>
											</div>
											<div class="float-start">
												<a title="Help"
													href="https://github.com/salarcode/SmartProxy/wiki/Proxy-Rules"
													target="_blank" class="btn btn-info">
													<i class="fas fa-question"></i>
												</a>
											</div>
										</div>
									</div>
								</div>
							</form>
						</div>
						<div class="modal fade" id="modalAddMultipleRules" tabindex="-1" role="dialog"
							aria-labelledby="modalAddMultipleRulesLabel">
							<!-- Proxy Rule Multiple -->
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h4 class="modal-title" id="modalModifyRuleLabel"
											data-localize="settingsAddMultipleRuleTitle">Add Multiple Rules</h4>
										<button type="button" class="btn-close" data-bs-dismiss="modal"
											aria-label="Close"></button>
									</div>
									<div class="modal-body">
										<div class="form-group mb-3">
											<label for="txtRuleMatchPattern" data-localize="settingsRulesRuleType"
												class="form-label">
												Rule Type</label>
											<select id="cmdMultipleRuleType" class="form-select">
												<option value="0">Host wildcard (Match Pattern)</option>
												<option value="1">Url wildcard (Match Pattern)</option>
												<!-- <option value="2">Host regex</option>
													<option value="3">Url regex</option> -->
												<option value="4">Exact Url</option>
											</select>
										</div>
										<div class="form-group">
											<label for="txtMultipleRuleList" class="form-label"
												data-localize="settingsMultipleRuleList">Host/Rule list:</label>
											<textarea class="form-control direction-ltr" id="txtMultipleRuleList"
												rows="10"></textarea>
											<span data-localize="settingsBypassListHint"
												class="form-text text-muted">(Use new line to separate entries)</span>
										</div>
										<div class="row">
											<div class="form-group col-sm-6">
												<label for="cmdRuleAction" class="form-label"
													data-localize="settingsRulesActionType">Action</label>
												<select id="cmdRuleAction" class="form-select">
													<option value="0" data-localize="settingsRuleActionApplyProxy">
														Apply Proxy</option>
													<option value="1" data-localize="settingsRuleActionWhitelist">
														Whitelist (No proxy)</option>
												</select>
											</div>
											<div class="form-group col-sm-6" id="divRuleProxyServer">
												<label for="cmdRuleProxyServer" class="form-label"
													data-localize="settingsRulesProxyServer">Proxy Server</label>
												<select id="cmdRuleProxyServer" class="form-select"></select>
												<span class="form-text text-muted small chrome-only"
													data-localize="settingsRulesProxyServerNotAuth">
													(Servers with authentication are not supported in Chrome)</span>
											</div>
										</div>
									</div>
									<div class="modal-footer">
										<button type="button" id="btnSubmitMultipleRule" class="btn btn-primary"
											data-localize="settingsRulesModalSave">Save</button>
										<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
											data-localize="settingsRulesModalCancel">Cancel</button>
									</div>
								</div>
							</div>
						</div>
						<div class="modal fade" id="modalRulesSubscription" tabindex="-1" role="dialog"
							aria-labelledby="modalRulesSubscriptionLabel">
							<!----------modal Rules Subscription----------->
							<div class="modal-dialog" role="document">
								<form class="modal-content">
									<div class="modal-header">
										<h4 class="modal-title" id="modalRulesSubscriptionLabel"
											data-localize="settingsRulesSubscriptionsModalTitle">
											Subscribe to a rules list</h4>
										<button type="button" class="btn-close" data-bs-dismiss="modal"
											aria-label="Close"></button>
									</div>
									<div class="modal-body">
										<div class="form-group mb-3">
											<label for="txtName" class="form-label"
												data-localize="settingsRulesSubscriptionsName">Name:</label>
											<input type="text" class="form-control" id="txtName" placeholder="Name"
												required>
										</div>
										<div class="form-group mb-3">
											<label for="txtUrl" class="form-label"
												data-localize="settingsRulesSubscriptionsUrl">Url:</label>
											<input type="url" class="form-control direction-ltr" id="txtUrl"
												placeholder="Url" checked required>
										</div>
										<div class="row mb-3">
											<div class="form-group col-sm-6">
												<label for="numRefreshRate" class="form-label"
													data-localize="settingsRulesSubscriptionsRefreshRate">
													Refresh Rate:</label>
												<input type="number" min="0" class="form-control" id="numRefreshRate"
													placeholder="Refresh rate in minutes" required>
												<span data-localize="settingsRulesSubscriptionsRefreshRateHelp"
													class="form-text text-muted">
													(in minutes, 0 means no refresh)</span>
											</div>
											<div class="form-group col-sm-6">
												<br />
												<label class="form-check-label mt-2">
													<input class="form-check-input" type="checkbox"
														id="chkRulesSubscriptionEnabled">
													<span data-localize="settingsRulesSubscriptionEnabled"
														class="user-select-none">Enabled</span>
												</label>
											</div>
										</div>
										<div class="row mb-3">
											<div class="form-group col-sm-6">
												<label for="cmbRulesSubscriptionObfuscation" class="form-label"
													data-localize="settingsRulesSubscriptionsObfuscation">Obfuscation:</label>
												<select class="form-select" id="cmbRulesSubscriptionObfuscation"
													required></select>
											</div>
											<div class="form-group col-sm-6">
												<label for="cmbRulesSubscriptionFormat" class="form-label"
													data-localize="settingsRulesSubscriptionsFormat">Format:</label>
												<select class="form-select" id="cmbRulesSubscriptionFormat" required>
													<option value="0">AutoProxy/GFWList</option>
													<option value="1">SwitchyOmega (beta)</option>
												</select>
											</div>
										</div>
										<div class="row mb-3">
											<div class="form-group col-sm-6">
												<label for="cmbRulesSubscriptionApplyProxy" class="form-label"
													data-localize="settingsRulesSubscriptionsApplyProxy">
													Pass through proxy:</label>
												<select class="form-select" id="cmbRulesSubscriptionApplyProxy"
													required></select>
												<small data-localize="settingsRulesSubscriptionsApplyProxyHelpFirefox"
													class="form-text text-muted firefox-only">
													(Decide base on your access to the server)
												</small>
												<small data-localize="settingsRulesSubscriptionsApplyProxyHelpChrome"
													class="form-text text-muted chrome-only">
													(Unfortunately this feature is not available in chrome. Current
													proxy will apply)
												</small>
											</div>
										</div>
										<div class="row">
											<div class="form-group col-sm-6">
												<label for="cmbRulesSubscriptionUsername" class="form-label"
													data-localize="settingsRulesSubscriptionsUsername">Username:</label>
												<input type="text" class="form-control"
													id="cmbRulesSubscriptionUsername">
												<span data-localize="settingsRulesSubscriptionsAuthenticationHelp"
													class="form-text text-muted">
													(if the list requires authentication)</span>
											</div>
											<div class="form-group col-sm-6">
												<label for="cmbRulesSubscriptionPassword" class="form-label"
													data-localize="settingsRulesSubscriptionsPassword">Password:</label>
												<input type="password" class="form-control"
													id="cmbRulesSubscriptionPassword" />
											</div>
										</div>
									</div>
									<div class="modal-footer">
										<div class="fullwidth">
											<div class="float-start">
												<button type="button" id="btnTestRulesSubscriptions"
													class="btn btn-secondary"
													data-localize="settingsRulesSubscriptionsTestButton">Test</button>
											</div>
											<div class="float-end">
												<button type="button" id="btnSaveRulesSubscriptions"
													class="btn btn-primary"
													data-localize="settingsRulesSubscriptionsSaveButton">
													Save
												</button>
												<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
													data-localize="settingsRulesSubscriptionsCancelButton">Cancel</button>
											</div>
										</div>
										<div class="clearfix"></div>
									</div>
								</form>
							</div>
						</div>
						<div class="modal fade" id="modalImportRules" tabindex="-1" role="dialog"
							aria-labelledby="modalImportRulesLabel">
							<!-- ----------Modal Import Rules Label-------------  -->
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h4 class="modal-title" id="modalImportRulesLabel"
											data-localize="settingsImportRulesTitle">Import Rules</h4>
										<button type="button" class="btn-close" data-bs-dismiss="modal"
											aria-label="Close"></button>
									</div>
									<div class="modal-body">
										<div class="form-group mb-3">
											<label class="form-label">
												<input type="radio" name="rbtnImportRulesSelect"
													id="rbtnImportRulesSelect_File" class="form-check-input" />
												<span data-localize="settingsImportRulesSelectButton">Rules Backup File</span>
											</label>
											<input type="file" id="btnImportRulesSelectFile"
												class="form-control" />
										</div>
										<div class="form-group mb-3">
											<label class="form-label">
												<input type="radio" name="rbtnImportRulesSelect"
													id="rbtnImportRulesSelect_Text" class="form-check-input" />
												<span data-localize="settingsImportRulesText">Rules Backup Text</span>
											</label>
											<textarea class="form-control direction-ltr"
												id="txtImportRulesSelectText" rows="10"></textarea>
										</div>

										<div class="form-group mb-3">
											<label for="cmbImportRulesFormat" class="form-label"
												data-localize="settingsImportRulesFrom">From</label>
											<select id="cmbImportRulesFormat" class="form-select" placeholder="(Please select)">
												<option value="0">GFWList/AutoProxy</option>
												<option value="1">SwitchyOmega (beta)</option>
											</select>
										</div>

										<div class="radio">
											<label class="form-label">
												<input type="radio" id="cmbImportRulesOverride_Append"
													class="form-check-input" name="cmbImportRulesOverride" />
												<span data-localize="settingsImportRulesOptionAppend">Append to existing
													rules</span>
											</label>
										</div>
										<div class="radio">
											<label class="form-label">
												<input type="radio" id="cmbImportRulesOverride_Replace"
													class="form-check-input" name="cmbImportRulesOverride" />
												<span data-localize="settingsImportRulesOptionOverride">Replace current
													rules (use with caution)</span>
											</label>
										</div>
									</div>
									<div class="p-3">
										<div class="float-end">
											<button type="button" id="btnImportRules" class="btn btn-primary"
												data-localize="settingsImportRulesImportButton">Import</button>
											<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
												data-localize="settingsImportRulesCancelButton">Cancel</button>
										</div>
										<div class="float-start">
											<a title="Help"
												href="https://github.com/salarcode/SmartProxy/wiki/Import-Rules"
												target="_blank" class="btn btn-info">
												<i class="fas fa-question"></i>
											</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="tab-pane fade" id="tab-server-subscriptions" role="tabpanel">
						<!----------Proxy Server Subscriptions----------->
						<h3 data-localize="settingsTabProxyServerSubscriptions">Proxy Server Subscriptions</h3>
						<hr class="afshin-line" />

						<h4 data-localize="settingsTabProxyServerSubscriptionsTitle">
							Manage proxy server subscriptions:
						</h4>
						<p data-localize="settingsTabProxyServerSubscriptionsDescription">
							Here you can subscribe to proxy lists and switch between the proxies later. Please note that
							long lists may
							cause failure in syncing data between devices.
						</p>
						<p>
						<div class="float-start">
							<button id="btnAddServerSubscription" class="btn btn-info"
								data-localize="settingsAddServerSubscriptionButton">
								Subscribe to a list
							</button>
						</div>
						<div class="clearfix"></div>
						</p>
						<table id="grdServerSubscriptions" class="table table-striped table-bordered table-hover">
						</table>

						<p class="mt-2">
						<div class="float-start">
							<button id="btnSaveServerSubscriptionsChanges" class="btn btn-primary">
								<span data-localize="settingsSaveChangesButton">Save Changes</span>
							</button>
							<button id="btnRejectServerSubscriptionsChanges" class="btn btn-outline-secondary">
								<span data-localize="settingsRejectChangesButton">Reject Changes</span>
							</button>
							<a title="Help"
								href="https://github.com/salarcode/SmartProxy/wiki/Proxy-Server-Subscriptions"
								target="_blank" class="btn btn-outline-info">
								<i class="fas fa-question"></i>
							</a>
						</div>
						<div class="float-end">
							<button id="btnRemoveMultipleServerSubscription" class="btn btn-danger" disabled
								data-localize="settingsRemoveMultipleServerSubscriptionButton"
								title="Use Ctrl/Shift and click on the grid">
								Delete Multiple
							</button>
							<button id="btnClearServerSubscriptions" class="btn btn-outline-danger"
								title="Clear all the subscriptions">
								<i class="fas fa-trash" aria-hidden="true"></i>
							</button>
						</div>
						<div class="clearfix"></div>
						</p>

					</div>
					<div class="tab-pane fade" id="tab-backup" role="tabpanel">
						<!----------Backup/Restore----------->
						<h3 data-localize="settingsTabBackupRestore">Backup/Restore</h3>
						<hr class="afshin-line" />
						<p data-localize="settingsTabBackupRestoreDescription">
							You can make either full or partial backup of your settings.
						</p>
						<p>
							<button id="btnBackupComplete" class="btn btn-outline-secondary backup-buttons">
								<i class="fas fa-download" aria-hidden="true"></i>
								<span data-localize="settingsFullBackupButton">Create full backup</span>
							</button>
							<span class="custom-control-description" data-localize="settingsFullBackupButtonDesc">
								Make a full backup of the options (including proxy servers and rules).
							</span>
						</p>

						<form id="frmRestoreBackup" style="display: none"></form>
						<p>
							<button id="btnRestoreBackup" class="btn btn-outline-secondary backup-buttons">
								<i class="fas fa-upload" aria-hidden="true"></i>
								<span data-localize="settingsRestoreBackupButton">Restore backup</span>
							</button>
							<span data-localize="settingsRestoreBackupButtonDesc">
								Restore your previously taken backup from a local file
							</span>
						</p>

						<br />
						<hr class="afshin-line">
						<p data-localize="settingsImportExportProxiesDesc">
							Import/Export individual list of proxies servers.
						</p>
						<p>
							<button id="btnImportProxyServerOpenBackup" class="btn btn-outline-secondary backup-buttons"
								data-bs-toggle="modal" data-bs-target="#modalImportProxyServer">
								<i class="fas fa-download" aria-hidden="true"></i>
								<span data-localize="settingsImportProxiesButtonBackup">Import Proxy Servers</span>
							</button>
						</p>
						<p>
							<button id="btnExportProxyServerOpenBackup"
								class="btn btn-outline-secondary backup-buttons">
								<i class="fas fa-upload" aria-hidden="true"></i>
								<span data-localize="settingsExportProxiesButtonBackup">Export Proxy Servers</span>
							</button>
						</p>
						<hr class="afshin-line">
						<div class="accordion" id="accordionPanelsDangerZone">
							<div class="accordion-item">
								<h2 class="accordion-header" id="panelsFactoryReset-heading">
									<button class="accordion-button collapsed text-warning" type="button"
										data-bs-toggle="collapse" data-bs-target="#panelsFactoryReset"
										aria-expanded="true" aria-controls="panelsFactoryReset"
										data-localize="settingsDangerZoneDesc">
										Danger zone
									</button>
								</h2>
								<div id="panelsFactoryReset" class="accordion-collapse collapse"
									aria-labelledby="panelsFactoryReset-heading">
									<div class="accordion-body">
										<p>
											<button id="btnFactoryReset" class="btn btn-outline-warning backup-buttons">
												<i class="far fa-trash-alt" aria-hidden="true"></i>
												<span data-localize="settingsFactoryResetButton">Factory Reset</span>
											</button>
											<span class="custom-control-description"
												data-localize="settingsFactoryResetDesc">
												Reset everything. This will remove all rules and proxy servers and reset
												the options.
												Permanently.
											</span>
										</p>
									</div>
								</div>
							</div>
						</div>
						<div class="py-3 float-end">
							<a title="Help" href="https://github.com/salarcode/SmartProxy/wiki/Backup-Restore"
								target="_blank" class="btn btn-info">
								<i class="fas fa-question"></i>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row mt-5">
			<div class="col">
				<div class="text-dark text-center text-secondary small">
					<small> Brought to you by Salar,</small>
					<small id="spanVersion"></small>
				</div>
			</div>
		</div>
	</div>
	<!-- Modals -->

	<div class="modal fade" id="modalAddNewSmartProfile" tabindex="-1" role="dialog"
		aria-labelledby="modalAddNewSmartProfileLabel">
		<!-- New Smart Profile -->
		<form action="#" id="frmNewSmartProfile">
			<div class="modal-dialog modal-lg" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title" id="modalAddNewSmartProfileLabel"
							data-localize="settingsProfilesAddNewLabel">
							Add New Smart Profile</h4>
						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body p-4">
						<p class="lead" data-localize="settingsProfilesAddNewTypeLead">
							Please select the <b>type of profile</b> you want to add:
						</p>
						<div class="form-check mb-4">
							<label class="form-check-label">
								<input type="radio" name="SmartProfileType" checked class="form-check-input"
									id="rbtnNewSmartProfile_SmartRules">
								<i class="fas fa-magic fa-lg text-success" aria-hidden="true"></i>
								<span class="font-weight-bold"
									data-localize="settingsProfilesAddNewType_SmartRules">Smart Rules</span>
								<div class="form-text text-muted"
									data-localize="settingsProfilesAddNewType_SmartRulesDesc">
									In this type of profile, proxy will be applied to the requests based on the
									<em>rules</em> that you need to define.
									To define these rule you can use the popup menu in the menu bar, you can do it from
									settings and also you can add them from <em>Proxyable Resource</em> window.
									<br>
									Also you have the ability to subscribe to different rules list like Gfwlist.
								</div>
							</label>
						</div>
						<div class="form-check">
							<label class="form-check-label">
								<input type="radio" name="SmartProfileType" class="form-check-input"
									id="rbtnNewSmartProfile_AlwaysEnabled">
								<i class="fas fa-globe-americas text-primary" aria-hidden="true"></i>
								<span class="font-weight-bold"
									data-localize="settingsProfilesAddNewType_AlwaysEnabled">Always Enabled</span>
								<div class="form-text text-muted"
									data-localize="settingsProfilesAddNewType_AlwaysEnabledDesc">
									In this type of profile, proxy will always be applied to the requests unless you
									define rules to bypass it. Defining rules steps are same as in the SmartRule profile
									type.</div>
							</label>
						</div>
					</div>
					<div class="p-3">
						<div class="float-end">
							<button type="button" id="btnSubmitContinueAddingProfile" class="btn btn-primary"
								data-localize="settingsProfilesAddNewBtnContinue">Continue</button>
							<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
								data-localize="settingsProfilesAddNewBtnCancel">Cancel</button>
						</div>

						<div class="float-start">
							<a title="Help" href="https://github.com/salarcode/SmartProxy/wiki/Add-New-Smart-Profile"
								target="_blank" class="btn btn-info">
								<i class="fas fa-question"></i>
							</a>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>

	<div class="modal fade" id="modalModifyProxyServer" tabindex="-1" role="dialog">
		<!-- Proxy Server -->
		<input type="hidden" id="txtServerOrder" />
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="modalModifyProxyServerLabel" data-localize="settingsServersModalTitle">
						Proxy Server Details</h4>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<div class="row mb-3">
						<div class="form-group col">
							<label for="txtServerName" data-localize="settingsServersServerName" class="form-label">
								Server Name</label>
							<input type="text" id="txtServerName" class="form-control" />
						</div>
					</div>
					<div class="row mb-3">
						<div class="form-group col-sm-6">
							<label for="txtServerAddress" data-localize="settingsServersSeverAddress"
								class="form-label">
								Sever Address</label>
							<input type="text" id="txtServerAddress" class="form-control" />
						</div>
						<div class="form-group col-sm-6">
							<label for="cmdServerProtocol" data-localize="settingsServersProtocol" class="form-label">
								Proxy Protocol</label>
							<select id="cmdServerProtocol" class="form-select">
								<option value="HTTP">HTTP</option>
								<option value="HTTPS">HTTPS</option>
								<option value="SOCKS4">SOCKS4</option>
								<option value="SOCKS5">SOCKS5</option>
							</select>
						</div>
					</div>
					<div class="row mb-3">
						<div class="form-group col-sm-6">
							<label for="txtServerPort" data-localize="settingsServersPort" class="form-label">
								Port</label>
							<input type="number" id="txtServerPort" class="form-control" min="0" max="65535" />
						</div>
						<div class="form-group col-sm-6 pr-1">
							<br />
							<div class="mt-2" id="chkServerProxyDNS-Control">
								<label class="form-check-label">
									<input class="form-check-input" type="checkbox" id="chkServerProxyDNS">
									<span data-localize="settingsServersProxyDNS" class="user-select-none">Proxy DNS
										when using SOCKS 5</span>
								</label>
							</div>
						</div>
					</div>
					<div class="row mb-3" id="chkServerProxy-Authentication">
						<div class="form-group col-sm-6">
							<label for="txtServerUsername" data-localize="settingsServersUsername" class="form-label">
								Username</label>
							<input type="text" id="txtServerUsername" class="form-control" />
						</div>
						<div class="form-group col-sm-6">
							<label for="txtServerPassword" data-localize="settingsServersPassword" class="form-label">
								Password</label>
							<input type="password" id="txtServerPassword" class="form-control" />
						</div>
					</div>
					<div class="row mb-3" id="divServerProxy-AuthenticationMessage">
						<div class="form-group col chrome-only d-none">
							<span data-localize="settingsServersAuthChromeMv3Limitation">(Unfortunately proxy server
								authentication is not supported by chrome through extensions api. This is "on
								purpose".)</span>
						</div>
					</div>
				</div>
				
				<div class="modal-footer">
					<!-- <button type="button" class="btn btn-primary">Save changes</button>
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> -->
					<button type="button" class="btn btn-primary" id="btnSubmitProxyServer"
						data-localize="settingsServersSave">Save
						Changes</button>
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
						data-localize="settingsServersCancel">Cancel</button>
				</div>
			</div>
		</div>
	</div>



	<div class="modal fade" id="modalServerSubscription" tabindex="-1" role="dialog"
		aria-labelledby="modalServerSubscriptionLabel">
		<!----------modal Server Subscription----------->
		<div class="modal-dialog" role="document">
			<form class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="modalServerSubscriptionLabel"
						data-localize="settingsServerSubscriptionModalTitle">Subscribe
						to a proxy server list</h4>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<div class="form-group mb-3">
						<label for="txtName" data-localize="settingsServerSubscriptionName"
							class="form-label">Name:</label>
						<input type="text" class="form-control" id="txtName" placeholder="Name" required>
					</div>
					<div class="form-group mb-3">
						<label for="txtUrl" data-localize="settingsServerSubscriptionUrl"
							class="form-label">Url:</label>
						<input type="url" class="form-control direction-ltr" id="txtUrl" placeholder="Url" checked
							required>
					</div>
					<div class="row mb-3">
						<div class="form-group col-sm-6">
							<label for="numRefreshRate" data-localize="settingsServerSubscriptionRefreshRate"
								class="form-label">
								Refresh Rate:</label>
							<input type="number" min="0" class="form-control" id="numRefreshRate"
								placeholder="Refresh rate in minutes" required>
							<span data-localize="settingsServerSubscriptionRefreshRateHelp"
								class="form-text text-muted">(in minutes, 0
								means no refresh)</span>
						</div>
						<div class="form-group col-sm-6">
							<br />
							<label class="form-check-label mt-2">
								<input class="form-check-input" type="checkbox" id="chkServerSubscriptionEnabled">
								<span data-localize="settingsServerSubscriptionEnabled"
									class="user-select-none">Enabled</span>
							</label>
						</div>
					</div>
					<div class="row mb-3">
						<div class="form-group col-sm-6">
							<label for="cmbServerSubscriptionProtocol" class="form-label"
								data-localize="settingsServerSubscriptionProtocol">Protocol:</label>
							<select class="form-select" id="cmbServerSubscriptionProtocol"></select>
						</div>
						<div class="form-group col-sm-6">
							<label for="cmbServerSubscriptionObfuscation" class="form-label"
								data-localize="settingsServerSubscriptionObfuscation">Obfuscation:</label>
							<select class="form-select" id="cmbServerSubscriptionObfuscation"></select>
						</div>
					</div>
					<div class="row mb-3">
						<div class="form-group col-sm-6">
							<label for="cmbServerSubscriptionFormat" class="form-label"
								data-localize="settingsServerSubscriptionFormat">Format:</label>
							<select class="form-select" id="cmbServerSubscriptionFormat"></select>
						</div>
						<div class="form-group col-sm-6">
							<label for="cmbServerSubscriptionApplyProxy" class="form-label"
								data-localize="settingsServerSubscriptionApplyProxy">Pass through proxy:</label>
							<select class="form-select" id="cmbServerSubscriptionApplyProxy"></select>
							<small data-localize="settingsServerSubscriptionApplyProxyHelpFirefox"
								class="form-text text-muted firefox-only">
								(Decide base on your access to the server)
							</small>
							<small data-localize="settingsServerSubscriptionApplyProxyHelpChrome"
								class="form-text text-muted chrome-only">
								(Unfortunately this feature is not available in chrome. Current proxy will apply)
							</small>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-sm-6">
							<label for="cmbServerSubscriptionUsername" class="form-label"
								data-localize="settingsServerSubscriptionUsername">Username:</label>
							<input type="text" class="form-control" id="cmbServerSubscriptionUsername">
							<span data-localize="settingsServerSubscriptionAuthenticationHelp"
								class="form-text text-muted">(if the list
								requires authentication)</span>
						</div>
						<div class="form-group col-sm-6">
							<label for="cmbServerSubscriptionPassword" class="form-label"
								data-localize="settingsServerSubscriptionPassword">Password:</label>
							<input type="password" class="form-control" id="cmbServerSubscriptionPassword" />
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<div class="fullwidth">
						<div class="float-start">
							<button type="button" id="btnTestServerSubscription" class="btn btn-secondary"
								data-localize="settingsServerSubscriptionTestButton">Test</button>
						</div>
						<div class="float-end">
							<button type="button" id="btnSaveServerSubscription" class="btn btn-primary"
								data-localize="settingsServerSubscriptionSaveButton">Save
							</button>
							<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
								data-localize="settingsServerSubscriptionCancelButton">Cancel</button>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</form>
		</div>
	</div>



	<div class="modal fade" id="modalImportProxyServer" tabindex="-1" role="dialog"
		aria-labelledby="modalImportProxyServerLabel">
		<!-- --------Import Proxy Server----------- -->
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="modalImportProxyServerLabel" data-localize="settingsImportProxiesTitle">
						Import Proxy
						List</h4>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<div class="form-group mb-3">
						<label class="form-label">
							<input checked type="radio" name="rbtnImportProxyServer" id="rbtnImportProxyServer_File"
								class="form-check-input" />
							<span data-localize="settingsImportProxiesSelectFileButton">Proxy list file</span>
						</label>
						<input type="file" id="btnImportProxyServerSelectFile" class="form-control" />
					</div>
					<div class="form-group mb-3">
						<label class="form-label">
							<input type="radio" name="rbtnImportProxyServer" id="rbtnImportProxyServer_Text"
								class="form-check-input" />
							<span data-localize="settingsImportProxiesSelectTextButton">Proxy list text</span>
						</label>
						<textarea class="form-control direction-ltr" id="btnImportProxyServerListText"
							rows="10"></textarea>
					</div>

					<div class="form-group">
						<label class="form-label">
							<input checked type="radio" id="cmbImportProxyServerOverride_Append"
								class="form-check-input" name="cmbImportProxyServerOverride" />
							<span data-localize="settingsImportProxiesOptionAppend">Append to existing proxies</span>
						</label>
					</div>
					<div class="form-group">
						<label class="form-label">
							<input type="radio" id="cmbImportProxyServerOverride_Replace" class="form-check-input"
								name="cmbImportProxyServerOverride" />
							<span data-localize="settingsImportProxiesOptionOverride">Replace current proxies (use with
								caution)</span>
						</label>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" id="btnImportProxyServer" class="btn btn-primary"
						data-localize="settingsImportProxiesImportButton">Import</button>
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
						data-localize="settingsImportProxiesCancelButton">Cancel</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="modalShortcuts" tabindex="-1" role="dialog">
		<!-- List of shortcuts -->
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" data-localize="settingsGeneralKeyboardShortcutsTitle">Keyboard shortcuts
					</h4>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<dl>
						<dt>List of shortcuts</dt>
					</dl>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
						data-localize="settingsGeneralCloseButton">Close</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="modalWelcome" tabindex="-1" role="dialog">
		<!-- First install modal -->
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" data-localize="settingsWelcomeTitle">Welcome to SmartProxy</h4>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body has-list-with-muted-help" data-localize="settingsWelcomeMessage">
					<p>
						Welcome! I'm glad that you have chosen SmartProxy, the smart proxy switcher.
						<br>
						Please follow these steps to get started:
					</p>
					<ol>
						<li>
							Add a Proxy Server
							<br>
							<small>(Head to Proxy Servers tab and add a proxy server there)</small>
						</li>
						<li>
							Set proxy mode to Smart Proxy mode
							<br>
							<small>(Use toolbar popup menu to change the active mode to Smart Proxy)</small>
						</li>
						<li>
							Define Proxy Rules
							<br>
							<small>(Use toolbar popup menu to add rules or add/modify rules from Proxy Rules
								tab)</small>
						</li>
						<li>
							You're all set.
						</li>
					</ol>
				</div>
				<div class="modal-footer text-center">
					<div class="" style="margin: 0 auto">
						<button id="btnSkipWelcome" type="button" class="btn btn-primary" data-bs-dismiss="modal"
							data-localize="settingsWelcomeSkipButton">Got it</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<span id="btnEnableDiagnostics" class="diag">diag?</span>
</body>

</html>